<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css样式-->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/mui.css" rel="stylesheet" type="text/css"/>
    <link href="../css/mui.min.css" rel="stylesheet" type="text/css"/>
    <link href="../css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--弹出分类导航-->
<div id="sidebar">
        <div class="list-group">
                <span class="list_group_line active">
                    <span class="list_text">全部分类</span>
                    <button onclick="sideclose(this)" class="side_btn" type="button">
                        <span class="glyphicon glyphicon-th-list glyopen"></span>
                    </button>
                </span>
            <!--产品类别按钮-->
            <div class="list_title">
                <a id="a1" href="#" class="list-group-item">文具用品</a>
                <a id="a2" href="#" class="list-group-item">办公用品</a>
                <a id="a3" href="#" class="list-group-item">打印耗材</a>
                <a id="a4" href="#" class="list-group-item">更多n</a>
            </div>
            <!--文具用品-->
            <div id="b1" class="list_a list_content">
                <div class="list_line">
                    <a class="list_img" href="">
                        <img src="../source/images/sidebar_img1.jpg"/>
                        <span>A1办公打印专用纸</span>
                    </a>
                </div>
            </div>
            <!--办公用品-->
            <div id="b2" class="list_b list_content">
                <div class="list_line">
                    <a class="list_img" href="">
                        <img src="../source/images/sidebar_img1.jpg"/>
                        <span>A2办公打印专用纸</span>
                    </a>
                </div>
            </div>
            <!--打印耗材-->
            <div id="b3" class="list_c list_content">
                <div class="list_line">
                    <a class="list_img" href="">
                        <img src="../source/images/sidebar_img1.jpg"/>
                        <span>A3办公打印专用纸</span>
                    </a>
                </div>
            </div>
            <!--更多-->
            <div id="b4" class="list_d list_content">
                <div class="list_line">
                    <a class="list_img" href="">
                        <img src="../source/images/sidebar_img1.jpg"/>
                        <span>A4办公打印专用纸</span>
                    </a>
                </div>
            </div>
        </div>
</div>

<!--主页面-->
<div id="container" class="container">
<!--页头内容-->
<header>
<!--页头logo区块-->
        <div class="header_line dropdown">
            <button onclick="sideOpen(this)" class="header_btn" type="button">
                <span class="glyphicon glyphicon-th-list glyopen"></span>
            </button>
            <span class="header_logo">文具商城 ❀</span>
        </div>
<!--轮播区块-->
         <div class="header_n">
             <div id="slider" class="mui-slider" >
                 <div class="mui-slider-group mui-slider-loop">
                     <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                     <div class="mui-slider-item mui-slider-item-duplicate">
                         <a href="#">
                             <img src="../source/images/timg4.jpg">
                         </a>
                     </div>
                     <!-- 第一张 -->
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="../source/images/timg1.jpg">
                         </a>
                     </div>
                     <!-- 第二张 -->
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="../source/images/timg2.jpg">
                         </a>
                     </div>
                     <!-- 第三张 -->
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="../source/images/timg3.jpg">
                         </a>
                     </div>
                     <!-- 第四张 -->
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="../source/images/timg4.jpg">
                         </a>
                     </div>
                     <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                     <div class="mui-slider-item mui-slider-item-duplicate">
                         <a href="#">
                             <img src="../source/images/timg1.jpg">
                         </a>
                     </div>
                 </div>
                 <div class="mui-slider-indicator">
                     <div class="mui-indicator mui-active"></div>
                     <div class="mui-indicator"></div>
                     <div class="mui-indicator"></div>
                     <div class="mui-indicator"></div>
                 </div>
             </div>
<!--搜索框区块-->
             <div class="header_search">
             <div class="input-group">
                 <input type="text" class="form-control">
                 <span class="input-group-addon">搜索</span>
             </div>
         </div>
         </div>
 </header>
<!--网页中间内容-->
<div class="main_content">
<!--分类、订单、购物车、个人中心-->
        <div class="search_down">
            <a onclick="sideOpen(this)" class="search_down_li">
                <button class="header_btn btntopnav topnav1" type="button">
                    <span class="glyphicon glyphicon-th-list glytopnav"></span>
                </button>
                <div>全部分类</div>
            </a>
            <a class="search_down_li">
                <button class="header_btn btntopnav topnav2" type="button">
                    <span class="glyphicon glyphicon-tag glytopnav"></span>
                </button>
                <div>我的订单</div>
            </a>
            <a class="search_down_li">
                <button class="header_btn btntopnav topnav3" type="button">
                    <span class="glyphicon glyphicon-shopping-cart glytopnav"></span>
                </button>
                <div>购物车</div>
            </a>
            <a class="search_down_li" href="personalCenter.html">
                <button class="header_btn btntopnav topnav4" type="button">
                    <span class="glyphicon glyphicon-user glytopnav"></span>
                </button>
                <div>个人中心</div>
            </a>
        </div>
<!--新品上架-->
        <div class="new_style">
            <div class="new_style_li">
                <a class="new_style_a">
                    <img src="../source/images/new_style.jpg"/>
                </a>
            </div>
            <div class="new_style_li">
                <a class="new_style_b">
                    <img src="../source/images/new_style_2.jpg"/>
                </a>
                <a class="new_style_b">
                    <img src="../source/images/new_style_2.jpg"/>
                </a>
            </div>
        </div>
<!--热销标题栏-->
        <div class="hot_title">
            <a href="">热销商品</a>
            <a href="">更多></a>
        </div>
        <!--热销商品-->
        <div class="hot_style">
            <div class="hot_style_li">
                <a class="hot_style_a">
                    <img src="../source/images/hot_style.jpg"/>
                </a>
                <a class="hot_style_title">
                    <span class="font-title">得力A4纸得力A4纸得力A4纸</span><span class="font_big">&yen;9.9元</span>
                </a>
            </div>
            <div class="hot_style_li">
                <a class="hot_style_a">
                    <img src="../source/images/hot_style.jpg"/>
                </a>
                <a class="hot_style_title">
                    <span class="font-title">得力A4纸得力A4纸得力A4纸</span><span class="font_big">&yen;9.9元</span>
                </a>
            </div>
            <div class="hot_style_li">
                <a class="hot_style_a">
                    <img src="../source/images/hot_style.jpg"/>
                </a>
                <a class="hot_style_title">
                    <span class="font-title">得力A4纸得力A4纸得力A4纸</span><span class="font_big">&yen;9.9元</span>
                </a>
            </div>
        </div>
<!--猜你喜欢标题-->
        <div class="like_title">
            <span>——&nbsp;&nbsp;猜你喜欢&nbsp;♥&nbsp;&nbsp;——</span>
        </div>
        <!--猜你喜欢-->
        <div class="hot_style">
            <div id="dis_like" class="like_style_li">
                <a class="like_style_a">
                    <img src="../source/images/like_style.jpg"/>
                </a>
                <a class="like_style_title font-title">得力A4纸得力A4纸得力A4纸</a>
                <a class="like_style_title">
                    <span class="font_big font_line">&yen;9.9元</span>
                    <button class="glybtn"><span class="glyphicon glyphicon-shopping-cart"></span></button>
                    <span class="font_small">222人已付款</span>
                </a>
            </div>
            <a class="onload">点击加载更多……</a>
        </div>
</div>
<!--页尾-->
<footer id="footer">
        <button class="scrtop navbar-fixed-bottom" onclick="scrtop()"><span class=" glyphicon glyphicon-menu-up"></span></button>
        <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<!--底部固定：分类、订单、购物车、个人中心-->
            <div class="search_down">
                <a onclick="sideOpen(this)" class="search_down_li foot_li">
                    <button class="header_btn btnnav" type="button">
                        <span class="glyphicon glyphicon-th-list glynav"></span>
                    </button>
                    <div>全部分类</div>
                </a>
                <a class="search_down_li foot_li">
                    <button class="header_btn btnnav" type="button">
                        <span class="glyphicon glyphicon-tag glynav"></span>
                    </button>
                    <div>我的订单</div>
                </a>
                <a class="search_down_li foot_li">
                    <button class="header_btn btnnav" type="button">
                        <span class="glyphicon glyphicon-shopping-cart glynav"></span>
                    </button>
                    <div>购物车</div>
                </a>
                <a class="search_down_li foot_li" href="personalCenter.html">
                    <button class="header_btn btnnav" type="button">
                        <span class="glyphicon glyphicon-user glynav"></span>
                    </button>
                    <div>个人中心</div>
                </a>
            </div>
        </nav>
</footer>
</div>
<!--js文件夹下的jQuery库和js封装函数-->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/mui.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>